import React, { FC, useState, memo, useEffect, useCallback } from 'react';
import { Tabs } from 'antd-mobile';
import { isEmpty } from 'project-libs';
import List from './components/List';
import { fetchOrderLists } from '@/api/order';
import { LOAD_MORE_ID, PAGE_PARAMS } from '@/emuns';
import { IPageProps, IOrderItemProps } from '@/interface';
import { useObserverHook } from '@/hooks';
import { OrderSkeletons } from '@/skeletons';

import './index.less';

const Order: FC = () => {
  const tabs = [
    { title: '未支付', sub: 0 },
    { title: '已支付', sub: 1 },
  ];
  const [page, setPage] = useState<IPageProps>(PAGE_PARAMS);
  const [orders, setOrders] = useState<IOrderItemProps[] | undefined>();
  const [showMore, setShowMore] = useState(true);
  const [showSkeletons, setShowSkeletons] = useState(true);
  const [type, setType] = useState<string | number>(0);

  const incokeHttp = async (pageNum: number) => {
    const ret = await fetchOrderLists({
      ...page,
      pageNum,
      type,
    });

    return ret;
  };

  const loadOrders = async (pageNum: number) => {
    const ret = await incokeHttp(pageNum);
    if (!isEmpty(ret)) {
      setOrders(ret);
      setShowMore(true);
    } else {
      setShowMore(false);
      showSkeletons && setShowSkeletons(false);
    }
  };

  useObserverHook('#' + LOAD_MORE_ID, async entries => {
    if (entries[0].isIntersecting) {
      const ret = await incokeHttp(page.pageNum + 1);
      if (
        orders &&
        !isEmpty(orders) &&
        !isEmpty(ret) &&
        ret.length === page.pageSize
      ) {
        setOrders([...orders, ...ret]);
        setPage({
          ...page,
          pageNum: page.pageNum + 1,
        });
        setShowMore(true);
      } else {
        setShowMore(false);
      }
    }
  });

  useEffect(() => {
    loadOrders(1);

    return () => {
      setOrders(undefined);
    };
  }, [type]);

  const handleTabChange = useCallback(
    (val: object) => {
      const { sub } = val as { sub: number | string };
      setType(sub);
      setPage(PAGE_PARAMS);
      setOrders([]);
      setShowMore(true);
    },
    [setType, setPage, setOrders, setShowMore],
  );

  useEffect(() => {
    if (Array.isArray(orders) && showSkeletons) {
      setShowSkeletons(false);
    }
  }, [orders]);

  const currentOrders = Array.isArray(orders) ? orders : [];

  return (
    <div className="order-page-wrap">
      <Tabs tabs={tabs} onChange={handleTabChange}>
        <div className="tab">
          {showSkeletons ? (
            <OrderSkeletons />
          ) : (
            type === 0 && (
              <List orders={currentOrders} type={0} showMore={showMore} />
            )
          )}
        </div>
        <div className="tab">
          {showSkeletons ? (
            <OrderSkeletons />
          ) : (
            type === 1 && (
              <List orders={currentOrders} type={1} showMore={showMore} />
            )
          )}
        </div>
      </Tabs>
    </div>
  );
};

export default memo(Order);
